<template>
  <el-dialog :title="showTitle" :visible="showDialog" @close="close">
    <!-- 内容 -->
    <el-form ref="addDept" :model="formData" :rules="rules" label-width="120px">
      <el-form-item prop="name" label="部门名称">
        <el-input
          v-model="formData.name"
          placeholder="2-10个字符"
          style="width: 80%"
          size="mini"
        />
      </el-form-item>
      <el-form-item prop="memo" label="部门介绍">
        <el-input
          v-model="formData.memo"
          placeholder="1-100个字符"
          type="textarea"
          size="mini"
          :rows="4"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item>
        <!-- 按钮 -->
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button type="primary" size="mini" @click="btnOK"
              >确定</el-button
            >
            <el-button size="mini" @click="close">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  getDepartments,
  getDepartmentById,
  addDepartment,
  updateDepartment
} from '@/apis/department.js'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentNodeId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      formData: {
        id: this.currentNodeId,
        memo: '', // 部门介绍
        name: '', // 部门名称
        parentId: '' // 父级部门的id
      },
      rules: {
        memo: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 100,
            message: '部门介绍的长度为1-100个字符',
            trigger: 'blur'
          }
        ], // 部门介绍
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '部门名称的长度为2-10个字符',
            trigger: 'blur'
          },
          {
            trigger: 'blur',
            // 自定义校验
            validator: async (rule, value, callback) => {
              // value就是输入的名称
              let { data } = await getDepartments()
              data = data.data
              // 判断是不是编辑模式
              if (this.formData.id) {
                // id存在说明是编辑模式
                data = data.filter((item) => item.id !== this.formData.id)
              }
              // data数组中是否存在value
              if (data.some((item) => item.name === value)) {
                // 存在
                callback(new Error('部门中已经有该名称了'))
              } else {
                callback()
              }
            }
          }
        ] // 部门名称
      }
    }
  },
  // 计算属性
  computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '新增部门'
    }
  },
  methods: {
    close() {
      // 重置表单 只能重置在模版中绑定的数据
      this.formData = {
        id: '',
        memo: '', // 部门介绍
        name: '', // 部门名称
        parentId: '' // 父级部门的id
      }
      this.$refs.addDept.resetFields()
      this.$emit('update:showDialog', false)
    },
    // 确定按钮
    btnOK() {
      this.$refs.addDept.validate(async (isOK) => {
        if (isOK) {
          let msg = '新增'
          // 区分场景
          if (this.formData.id) {
            // 编辑场景
            msg = '更新'
            await updateDepartment(this.formData)
          } else {
            // 新增场景
            // 延展运算符... 可以拷贝出新对象
            await addDepartment({
              ...this.formData,
              parentId: this.currentNodeId
            })
          }
          // 通知父组件更新
          this.$emit('updateDepartment')
          // 提示消息
          this.$message.success(`${msg}成功`)
          this.close()
        }
      })
    },
    // 获取组织的详情
    async getDepartmentById() {
      const { data } = await getDepartmentById(this.currentNodeId)
      this.formData = data.data
    }
  }
}
</script>

<style>
</style>